<!--
 * @Description: 图片尺寸示意弹窗
 * @Author: Li Yujie
 * @Date: 2021/07/21
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/07/21
-->
<template>
    <section class="wrapper">
        <el-dialog
            :visible.sync="dialogVisible"
            :show-close="false"
            width="375px"
        >
            <div
                class="close-btn"
                @click="dialogVisible = false"
            >
                <i class="el-icon-circle-close"/>
            </div>
            <div class="dialog-content">
                <div class="content-wrapper">
                    <img
                        :src="imgSrc"
                        alt="">
                </div>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    name: 'ImageSizeDemo',
    props: {
        imgSrc: {
            type: String,
            default: 'http://cdn.zsdx.cn/phaadmin/work-page-demo.png'
        }
    },
    data() {
        return {
            dialogVisible: false,
        };
    },
    components: {},
    mounted() {},
    methods: {

        /**
         * 展示弹窗
         */
        show() {
            this.dialogVisible = true;
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .el-dialog {
        width: 375px;
        height: 667px;
        background: #F5F6F8;
        box-shadow: 0 0 20px 0 rgba(153, 169, 192, 0.2);
        position: relative;

        .close-btn {
            position: absolute;
            right: -20px;
            top: -20px;
            cursor: pointer;
            font-size: 20px;
            color: #fff;
        }

        .el-dialog__header {
            display: none;
        }

        .el-dialog__body {
            width: 100%;
            height: 100%;
            padding: 0;
            .dialog-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                .content-wrapper {
                    background: #fff;
                    margin: 10px;
                    flex: 1;
                    img {
                        width: 100%;
                    }
                }
            }
        }
    }
}
</style>
